<template>
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }">
		<c-nav-bar :title="titleHeader" :showHome="false"></c-nav-bar>
		<swiper class="swiper" :circular="true" :autoplay="true" :interval="3000" :duration="1000" :current="currIndex"
			@change="changeSwiper" :style="{ height: swiperHeight + 'px' }" :indicator-dots="true" indicator-active-color="#fff">
			<swiper-item class="swiper-items" v-for="(item, index) in picListImage" :key="index">
				<image :id="'wrap' + index" style="width: 100%" :src="item" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<!-- 审核未通过 -->
		<view class="shwtg" v-if="searchList.state===0" :style="{'top':mt+'px','height':swiperHeight+'px'}">
			<image src="https://fsy.shengsi.gov.cn/file/20240727/8ef4129cf1e14ea49c58d000bd97e6a3.png"></image>
			<text class="text">审核未通过</text>
			<text class="reason">原因：{{searchList.checkFeedback||''}}</text>
		</view>

		<view class="user" v-if="searchList">
			<view class="user-img">
				<image :src="searchList.headUrl" mode="aspectFill"></image>
			</view>
			<view class="user-right">
				<view class="user-name">
					{{ searchList.publisherName }}
				</view>
				<view class="user-time"> {{ searchList.releaseTime }}发布 </view>
			</view>
		</view>

		<view class="text-text" v-if="searchList">
			<view class="text-one">
				<!-- 嵊泗本岛自由行｜2天1夜充实版攻略｜食住 -->
				{{ searchList.title }}
			</view>
			<!-- <view class="text-two" v-for="(item, index) in substrings" :key="index">
				{{ item }}
			</view> -->
			<view class="text-two">
				<u-parse :content="searchList.content"></u-parse>
			</view>
		</view>
		<view class="pop-center" v-if="searchList">
			<view class="title"> 共{{ commentNum }}条评论 </view>
			<!-- @click="discuss(item,index)" -->
			<view v-for="(item, index) in searchList.comments" :key="index" class="comments">
				<view class="one-list" @tap="discuss(item, index)" @longpress="TapAndHold(item, index)">
					<view class="image">
						<image :src="item.headUrl" mode="aspectFill"></image>
					</view>
					<view class="text">
						<view class="center-title">
							{{ item.commentatorName }}
						</view>
						<view class="center-text">
							{{ item.content }}
						</view>
						<view class="center-time">
							{{ item.createDate }}
						</view>
					</view>
				</view>
				<template v-if="item.tempList.length > 0">
					<view class="two-list" v-for="(ite, ids) in item.tempList" :key="ids"
						@click="discussChildren(ite, ids)" @longpress="TapAndHold(ite, ids)">
						<view v-if="ite.pid == 0"> </view>
						<view v-else>
							<view class="image">
								<image :src="ite.headUrl" mode="aspectFill" style="margin-right: 8rpx"></image>
								<view class="center-title">
									{{ ite.commentatorName }}
								</view>
							</view>
							<view class="text">
								<view v-if="item.pid == ite.commentPid">
									<view class="center-text">
										{{ ite.content }}
									</view>
								</view>
								<view class="center-text" v-else>
									回复
									<text
										style="color: #777777; font-size: 24rpx; margin: 0 8rpx">{{ ite.pname }}:</text>{{
                    ite.content }}
								</view>
								<view class="center-time">
									{{ ite.createDate }}
								</view>
							</view>
						</view>
					</view>
				</template>

				<view class="two-list" v-if="item.children.length > 1" @click="showMore(index)">
					<span style="color: #0065b5">{{ item.canExpand ? "展开" : "收起"
						}}{{ item.children.length - 1 }}条回复</span>
				</view>
			</view>
		</view>

		<view class="bottom-input">
			<view class="icon">
				<!-- 点赞 -->
				<view class="box">
					<!-- <u-icon name="thumb-up" size="50rpx" :cllor="likeShow !==true?'#1bd0f4 ':''"></u-icon> -->
					<u-icon name="thumb-up" v-if="likeType == 0" size="50rpx" @click="like"></u-icon>
					<u-icon name="thumb-up-fill" color="#007A69" size="50rpx" v-else @click="like"></u-icon>
					<u-badge :type="type" max="99" :value="likenum"></u-badge>
				</view>
				<!-- 评论 -->
				<view class="box">
					<u-icon name="chat" size="50rpx" :cllor="commentShow !== true ? '#1bd0f4' : ''"></u-icon>
					<u-badge :type="type" max="99" :value="commentNum"></u-badge>
				</view>
				<!-- 收藏 -->
				<view class="box" @click="care">
					<u-icon name="star" size="50rpx" v-if="careType == 0"></u-icon>
					<u-icon name="star-fill" color="#007A69" size="50rpx" v-else></u-icon>
					<u-badge :type="type" max="99" :value="carenum"></u-badge>
				</view>
			</view>

			<view class="pop-input" @click="showVal" :class="showValues == false ? 'pop-input-if' : ''">
				<view class="ipt">
					<u--input placeholder="说点什么" shape="circle" border="none" v-model="values" @blur="comment"><u--text
							slot="prefix" margin="0 70rpx 0 0" padding="6rpx" type="tips"></u--text></u--input>
				</view>
			</view>
		</view>
		<!-- 评论输入框 -->
		<view v-if="commit">
			<input-box :commit="commit" border="none" @submit="submit"></input-box>
		</view>
		<view v-else> </view>
		<!-- 评论删除回复弹出框 -->
		<u-popup :show="show" @close="close" :round="24" @open="open">
			<view class="pop">
				<view class="two" style="color: #ff4141" @click="del"> 删除 </view>
				<view class="three" @click="show = false"> 取消 </view>
			</view>
		</u-popup>
		<!-- 授权手机登录 -->
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</view>
</template>

<script>
	import GetPhoneNumber from "@/compoments/Getphonenumber/index.vue";
	import inputBox from "@/compoments/inputBox/inputBox.vue";
	export default {
		components: {
			GetPhoneNumber,
			inputBox,
		},
		data() {
			return {
				currIndex:0,
				swiperHeight:800,
				h: uni.getSystemInfoSync().windowHeight - 87,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleHeader: "攻略详情",
				brandFold: false,
				showValues: true,
				title: "提示",
				content: "确定删除此评论",
				likeShow: true,
				careShow: true,
				commit: false,
				type: "warning",
				likenum: 0,
				commentNum: 0,
				carenum: 0,
				values: "",
				currentNum: 0,
				// value: '',
				id: "",
				searchList: '',
				moreList: {},
				list: [],
				picLength: 0,
				commentsLength: 0,
				introdutionId: "",
				dto: {
					commentPid: null,
					commentatorId: 0,
					commentatorName: "",
					content: "",
					count: 0,
					createDate: "",
					creator: 0,
					id: null,
					num: 0,
					pid: null,
					tripId: null,
					updateDate: "",
					updater: null,
					pname: null,
					type: null,
					commId: null,
				},
				show: false,
				publisherId: 0,
				item: {},
				// showModal: false,
				substrings: {},
				likeType: null,
				careType: null,
				picListImage: ["https://i.ringzle.com/file/20240625/6e6f94378a574f3b8c2bb397eae41f4c.png"],
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.getList(option.id);
			this.dto.tripId = option.id;
			// this.$login().then(res => {
			// 	if (res !== 0) {
			// 		this.$refs['phoneNumber'].show = true;
			// 	}
			// })
		},

		methods: {
			// 切换 swiper 滑块
			changeSwiper(e) {
				this.currIndex = e.detail.current;
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},
			// 动态设置 swiper 的高度
			setSwiperHeight() {
				const element = "#wrap" + this.currIndex;
				const query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec(res => {
					if (res && res[0]) this.swiperHeight = res[0].height;
				});
			},
			showMore(index) {
				this.$set(
					this.searchList.comments[index],
					"canExpand",
					!this.searchList.comments[index].canExpand
				);
				let copy = JSON.parse(
					JSON.stringify(this.searchList.comments[index].children)
				);
				this.$set(
					this.searchList.comments[index],
					"tempList",
					this.searchList.comments[index].canExpand ?
					copy.splice(0, 1) :
					this.searchList.comments[index].children
				);
			},

			del() {
				this.show = false;
				this.showModal = true;
				this.$api
					.get(
						`/api/introdution/delComment?commentId=${this.item.id}&publisherId=${this.publisherId}&commentatorId=${this.item.commentatorId}`
					)
					.then((res) => {
						if (res.data.code == 0) {
							this.$showToast(res.data.data);
							this.getList(this.id);
						} else this.$showModal(res.data.msg);
					});
			},

			// 长按时间
			TapAndHold(item, index) {
				this.show = true;
				this.item = item;
			},
			open() {},
			close() {
				this.show = false;
			},
			showVal() {
				this.showValues = false;
			},
			// 底部一级评论文章
			comment(val) {
				this.showValues = true;
				this.dto.pid = 0;
				this.dto.content = val;
				if (val !== "") {
					this.$api.detectionContent(val,1).then(result => {
						if (result.code !== 0) return this.$showToast(result.msg);
						this.$api.post("/api/introdution/comment", this.dto).then((res) => {
							this.values = "";
							this.getList(this.id);
							this.showValues = true;
							if (res.data.code == 0) {
								this.$showToast(res.data.data);
							}

						});
					});


				}
			},

			// 评论区一级评论
			discuss(e, i) {
				this.commit = true;
				this.dto.pid = e.id; //二级id
				this.dto.commentPid = e.id;
				this.dto.pname = e.commentatorName;
				this.showValues = true;
			},
			// 评论区二级评论
			discussChildren(e, i) {
				this.commit = true;
				this.showValues = true;
				this.dto.pid = e.id;
				this.dto.revieweeId = e.creator; //被评论人 id
				this.dto.commentPid = e.commentPid;
				this.dto.pname = e.commentatorName;
			},

			// 评论区评论接口调用
			submit(val) {
				this.commit = false;
				if (val !== "") {
					this.commit = false;
					this.$api.detectionContent(val,1).then(result => {
						if (result.code !== 0) return this.$showToast(result.msg);
						this.dto.content = val;
						this.$api.post("/api/introdution/comment", this.dto).then((res) => {
							this.getList(this.id);
							if (res.data.code == 0) {
								this.$showToast(res.data.data);
							}
						});
					});

				}
			},

			// 点赞
			like() {
				let list = {
					id: this.introdutionId,
					type: this.dto.type,
				};

				this.$api.get("/api/introdution/Like", list).then((res) => {
					this.$showToast(res.data.data);
					if (res.data.data == "点赞成功") {
						this.likeShow = false;
					} else if (res.data.data == "取消成功") {
						this.likeShow = true;
					}
					this.getList(this.id);
				});
			},

			// 收藏
			care() {
				let list = {
					id: this.introdutionId,
					type: this.dto.type,
				};

				this.$api.get("/api/introdution/Care", list).then((res) => {
					this.$showToast(res.data.data);
					if (res.data.data == "收藏成功") {
						this.careShow = false;
					} else if (res.data.data == "取消成功") {
						this.careShow = true;
					}
					this.getList(this.id);
				});
			},
			loginSuccess() {
				this.getList(this.id);
			},
			// 获取详情数据
			getList(id) {
				this.$api.get(`/api/introdution/details?id=${id}`).then((res) => {
					this.introdutionId = res.data.data.id;
					this.searchList = res.data.data;
					// this.searchList.comments.forEach(s => s.list2 = []);

					this.searchList.comments.forEach((item, i) => {
						let copy = JSON.parse(JSON.stringify(item.children));
						this.$set(
							this.searchList.comments[i],
							"canExpand",
							copy.length > 1 ? true : false
						);
						this.$set(
							this.searchList.comments[i],
							"tempList",
							copy.length > 1 ? copy.splice(0, 1) : item.children
						);
					});

					this.list = res.data.data.pic;
					this.likenum = res.data.data.likeNum;
					this.commentNum = res.data.data.commentNum;
					this.carenum = res.data.data.careNum;
					this.picLength = res.data.data.picList.length;
					this.picListImage = res.data.data.picList
					this.commentsLength = res.data.data.comments.length;
					this.publisherId = res.data.data.publisherId;
					this.dto.type = res.data.data.publisherType;
					this.dto.commId = res.data.data.id;
					this.likeType = res.data.data.likeType;
					this.careType = res.data.data.careType;
					// 根据逗号(,)分割字符串
					this.substrings = this.searchList.content.split("\n");
					setTimeout(()=>{
						this.setSwiperHeight();
					},1000)
				});
			},
		},
	};
</script>
<style lang="less">
	.shwtg{
		width: 100%;
		position: absolute;
		left: 0;
		z-index: 999;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, .2);
		&>image{
			width: 48rpx;
			height: 64rpx;
		}
		.text{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 50rpx;
			margin-top: 16rpx;
		}
		.reason{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			margin-top: 16rpx;
		}
	}
	
	.u-moreList {
		width: 60% !important;
	}

	// .u-circle {
	// 	padding: 6rpx !important;
	// }
	.input-box {
		border-top: 0 !important;
		border-bottom: 0 !important;
	}

	.swiper {
		box-sizing: border-box;
		width: 100%;
		// height: 980rpx !important;
		//backdrop-filter: blur(300px);
		background: rgba(251, 251, 251, 0.1);
	}

	.u-badge {
		padding: 0 !important;
		background-color: #ffffff !important;
		margin-left: -14rpx;
		color: #666666 !important;
		margin-top: 5rpx;
	}

	.u-input__content__field-wrapper__field {
		font-size: 24rpx;
		margin-left: 30rpx;
	}

	.indicator {
		// @include flex(row);
		display: flex;
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		// @include flex;
		display: flex;
		justify-content: center;

		&__text {
			color: #ffffff;
			font-size: 12px;
		}
	}

	.comments {
		border-bottom: 1rpx solid #efefef;

		.one-list {
			display: flex;

			.image {
				// margin-top: -10rpx;
				margin: 20rpx;
				width: 64rpx;
				height: 64rpx;
				border-radius: 50rpx;

				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50rpx;
				}
			}

			.text {
				.center-title {
					margin-top: 26rpx;
					color: #777777;
					font-size: 24rpx;
				}

				.center-text {
					width: 580rpx;
				}

				.center-time {
					font-size: 24rpx;
					color: #aaa;
					font-weight: Regular;
				}
			}
		}

		.two-list {
			width: 520rpx;
			// display: flex;
			margin: 20rpx 100rpx;

			.image {
				width: 500rpx;
				display: flex;
				height: 35rpx;
				margin: 0 8rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50rpx;
				}

				.center-title {
					// margin-top: 26rpx;

					color: #777777;
					font-size: 24rpx;
				}
			}

			.text {
				margin-left: 38rpx;

				.center-text {
					width: 520rpx;
				}

				.center-time {
					font-size: 24rpx;
					color: #aaa;
					font-weight: Regular;
				}
			}
		}
	}

	.u-modal__content__text {
		text-align: center !important;
	}
</style>

<style lang="scss">
	.page {
		margin: 0;
		padding: 0;
		// padding-top: 150rpx;
	}

	.user {
		display: flex;
		padding: 31rpx 24rpx;

		.user-img {
			margin-right: 31rpx;
			width: 36px;
			height: 36px;
			border-radius: 50rpx;

			image {
				border-radius: 50rpx;
				height: 36px;
				width: 36px;
			}
		}

		.user-right {
			.user-name {
				font-size: 30rpx;
				color: #111111;
			}

			.user-time {
				font-size: 24rpx;
				color: #999999;
			}
		}
	}

	.text-text {
		padding: 0 26rpx 26rpx;
		border-bottom: 1rpx solid #f0f2f5;

		.text-one {
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
			margin-bottom: 12px;
		}

		.text-two {
			font-size: 30rpx;
			color: #333333;
			line-height: 50rpx;

			div {
				margin: 12px 0;
			}
		}
	}

	.pop-center {
		padding: 24rpx 24rpx 190rpx;
	}

	.bottom-input {
		border-top: 1rpx solid #f5f8fa;
		box-sizing: border-box;
		padding: 32rpx;
		position: fixed;
		bottom: 0;
		height: 142rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;

		.icon {
			// margin: 0 32rpx;
			width: 340rpx;
			height: 142rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text-align: center;

			.box {
				// flex: 1;

				display: flex;
				width: 120rpx;

				.u-icon__icon {
					width: 60rpx !important;
					height: 60rpx !important;
				}
			}
		}
	}

	.pop-input {
		margin: 0 auto;
		padding: 0 30rpx;
		background: #f5f8fa;
		width: 330rpx;
		height: 72rpx;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		// position: relative;

		text {
			font-size: 24rpx;
			color: #aaaaaa;
		}
	}

	.pop-input-if {
		// margin: 0 auto;
		// padding: 0 30rpx;
		// background-color: aqua;
		background: #fff !important;
		border-radius: 0 !important;

		box-sizing: border-box;
		width: 100vw;
		height: 150rpx;

		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 30rpx;

		.ipt {
			width: 100%;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 50rpx;
			background: #eeeeee;

			.u-input__content {
				padding: 12rpx !important;
			}
		}

		// .u-input--circle {

		// 	.uni-input-input {
		// 		padding: 50rpx;
		// 		margin-left: 50rpx;
		// 	}
		// }
	}

	.pop {
		// display: flex;
		// height: 408rpx;
		border-radius: 24rpx 24rpx 0 0;
		font-size: 32rpx;
		font-weight: 600;
		color: #111111;
		text-align: center;
		background-color: #fafafa;

		.one {
			padding-top: 10rpx;
			border-radius: 24rpx 24rpx 0 0;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
			margin-bottom: 6rpx;
		}

		.two {
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
		}

		.three {
			margin-top: 20rpx;
			height: 140rpx;
			line-height: 100rpx;
			background-color: #fff;
		}
	}
</style>